<template>
<transition name='slide'>
  <div class="commentList"> 
  <div class="back">
      <i class="fa fa-angle-left" @click="back"></i>
      <span>评论列表</span>
      <i class="fa fa-share-square-o" aria-hidden="true"></i>
  </div>
  <ul class="comments">
    <li v-for="item in showcommlist" :key="item.id">
      <div class="left"><img :src="item.user.avatarUrl"></div>
      <div class="right">
        <div class="zan">
          <span class="CommnetName" style="color:#EE6A22">{{item.user.nickname}}:</span>
          <i class="iconfont icon-dianzan"  @click.once="item.likedCount++" ></i>
          <span class="like">{{item.likedCount}}</span>
        </div>
        <p class="Comments">{{item.content}}</p>
        <p class="CommentDate">{{item.time|formatch}}</p>
      </div>
    </li>
  </ul>
  <p class="loadermore"  ref='nomore' @click="showMore">加载更多</p>
  </div>
</transition>
</template>
<script>
export default {
  props:['id'],
  data(){
    return{
      commentlist:[],
      showcommlist:[],
      showLoading:"true",
      limit:10,
      dianzNum:0,
      zan:true
    }
  },
  methods:{
    showMore(){
       this.showLoading = true;
       let num = this.showcommlist.length + this.limit;
       this.showcommlist = this.commentlist.slice(0,num);
       this.showLoading = false
       if(this.showcommlist.length >= this.commentlist.length){
        this.$refs.nomore.innerHTML = '没有更多数据了'
       }
     },
     back(){
       this.$router.back();
     }
  },
  filters:{
    formatch(value){
      let d = new Date(value)
      let years = d.getFullYear();
      let months = (d.getMonth()+1)<10?'0'+(d.getMonth()+1):(d.getMonth()+1)
      let days = d.getDay()
      let Hours = d.getHours()<10?'0'+d.getHours():d.getHours();
      let minutes = d.getMinutes()<10?'0'+d.getMinutes():d.getMinutes();
      return  years+'年'+months+'月'+ days +'日' +' '+ Hours + ':' +minutes;
    }
  },
  created(){
    this.$http.get('/comment/music',{
      params:{
        id:this.id
      }
    }).then(d=>{
      // console.log(d.data);
      let hotComment = d.data.hotComments;
      // console.log(hotComment);
      let comments = d.data.comments
      // console.log(comments);
      let result = []
      result = result.concat(hotComment,comments)
      this.commentlist = result;
      this.showcommlist =  this.commentlist.slice(0,this.limit)
      this.showLoading = false
      // console.log(this.commentlist);
    })
    
  }

}
</script>
<style lang="less" scoped>
.commentList{
  margin-top: -124px;
  .back{
    line-height: 45px;
    display: flex;
    align-items: center;
    position: fixed;
    width: 100%;
    text-align: center;
    background: #fff;
    i.fa-angle-left{
      flex: 1;
    }
    span{
      flex: 3;
    }
    i.fa-share-square-o{
      flex: 1;
    }
  }
  .comments{
    padding-top: 45px;
    li{
      display: flex;
      padding: 0px 17px 0px 10px; 
      .left{
        width: 40px;
        height: 35px;
        margin: 10px 14px 0px 10px;
        img{
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .right{
          width: 100%;
          border-bottom: 1px solid #F4F4F4;
          padding: 10px 0px;
        .zan{
          display: flex;
          align-items: center;
            .CommnetName{
              flex: 1;
              font-size: 14px;
              color: #666;
              line-height: 20px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap
            }
            .like{
              font-size: 12px;
            }
        }
      
        .CommentDate{
          font-size: 9px;
          color: #999;
          margin-top: 4px;
        }
        .Comments{
          color: #333;
          font-size: 13px;
          line-height: 22px;
          

        }
      }
    }
  }
  .loadermore{
    text-align: center;
    width: 90%;
    line-height: 40px;
    margin: 0 auto;
    color: #dd001b;
    border: 1px solid #dd001b;
    border-radius: 20px;
    cursor: pointer;
}
}
.slide-enter, .slide-leave-to {
  transform: translateY(100%);
  opacity: 0;
}
// 动画结束 回的地方
.slide-enter-to,.slide-leave{
  transform: translateY(0%);
  opacity: 1;
}
// 隐藏和结束的时间
.slide-enter-active,
.slide-leave-active{
  transition: all  1s ;
}
</style>